<template>
  <div class="container">
    <div class="main">
      <div class="left">
        <div style="margin-bottom: 10px;">
          <span @click="$router.push('/post')" style=" font-weight: bold;">旅游攻略</span>
          <span class="top">/</span>
          <span>攻略详情</span>
        </div>
        <h1>{{postDetail.title}}</h1>
        <div class="date">
          <span style="margin-right: 20px;">攻略：{{postDetail.date}}</span>
          <span>阅读：{{postDetail.watch}}</span>
        </div>
        <!-- 文章内容部分 -->
        <div class="content" v-html="postDetail.content"></div>
        <!-- 评论收藏。。。。 -->
        <div class="do">
          <div class="comments">
            <span class="iconfont icon-pinglun1"></span>
            <span class="text">评论({{postDetail.comments.length}})</span>
          </div>
          <div class="star" @click="starPost()">
            <span class="iconfont icon-shoucang1"></span>
            <span class="text">收藏</span>
          </div>
          <div class="share">
            <span class="iconfont icon-fenxiang1"></span>
            <span class="text">分享</span>
          </div>
          <div class="like">
            <span class="iconfont icon-dianzan"></span>
            <span class="text">点赞({{postDetail.like}})</span>
          </div>
        </div>
        <!-- 评论列表组件 -->
        <CommentsPost :data="postDetail" />
      </div>
      <div class="right">
        <h4
          style="padding-bottom: 10px; border-bottom: 1px solid #ddd; font-weight:normal;font-size:18px;"
        >相关攻略</h4>
        <!-- 文章列表组件 -->
        <PostsAside @getDate="getDate" />
      </div>
    </div>
  </div>
</template>

<script>
import CommentsPost from "@/components/post/commentsPost";
import PostsAside from "@/components/post/postsAside";
// 引入momentjs
import moment from "moment";
export default {
  components: {
    CommentsPost,
    PostsAside
  },
  data() {
    return {
      // 存放文章数据
      postDetail: {
        date: "", //   存放日期
        comments: [] // 评论
      }
    };
  },
  //   监听路由参数变化渲染 发送ajax请求
  watch: {
    $route: {
      // 当路由发生变化执行的操作
      handler() {
        //   获取id
        const { id } = this.$route.query;
        this.$axios({
          url: "/posts/" + id
        }).then(res => {
          const { data } = res;
          this.postDetail = data;
          //   获取日期
          this.getDate(data.created_at);
        });
      },
      //   在组件初始化的时候也会执行handler处理函数
      immediate: true
    }
  },
  methods: {
    //   转换日期格式的方法
    getDate(time) {
      let date = new Date(time);
      date = moment(date).format("YYYY-MM-DD hh:mm");
      this.postDetail.date = date;
    },
    starPost() {
      // this.$axios({
      //   url: "/posts/star",   
      //   headers: {
      //     // Bearer属于jwt的token标准 Bearer后要加空格隔开
      //     Authorization: "Bearer " + this.$store.state.user.userInfo.token
      //   },
      //    params:{id},
      // }).then(res => {
      //   console.log(res);
      // });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
  .main {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    .left {
      width: 700px;

      .top {
        margin: 0 6px;
        color: #999;
      }
      h1 {
        padding-bottom: 20px;
        border-bottom: 1px solid #ddd;
      }
      .date {
        margin: 20px 10px;
        display: flex;
        justify-content: flex-end;
        color: #999;
      }
      p {
        font-size: 12px;
        color: #999;
        margin-top: 10px;
      }
      .do {
        display: flex;
        justify-content: center;
        align-self: center;
        margin-top: 50px;
        div {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0 15px;
          .iconfont {
            color: orange;
            padding: 0 10px;
          }
          .text {
            color: #999;
          }
        }
      }
    }
    .right {
      width: 280px;
    }
  }
  /deep/.content img {
    max-width: 100%;
  }
  /deep/.content p {
    margin: 10px 0;
  }
}
</style>